<template>
  <div class="orderback-detail">
    <el-card class="card" shadow="never">
      <p>退货商品</p>
      <el-table
        :data="goodsList"
        border
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="商品图片"
          width="180"
        >
          <template slot-scope="scope">
            <img :src="scope.row.product.cover_img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="商品描述"
          width="240"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.gname }}</p>
            <p>品牌: <span>{{ scope.row.product.brandEname }}</span>|<span>{{ scope.row.product.brandName }}</span></p>
            <p>{{ scope.row.product.gdescr }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="价格/货号"
        >
          <template slot-scope="scope">
            <p>价格:￥{{ scope.row.product.p_price / 100 }}</p>
            <p>货号:{{ scope.row.product.sku_code }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="product.color_text"
          label="商品属性"
          width="180"
        />
        <el-table-column
          align="center"
          prop="count"
          label="数量"
          width="180"
        />
        <el-table-column
          align="center"
          prop=""
          label="小计"
          width="180"
        >
          <template slot-scope="scope">
            ￥{{ scope.row.count * scope.row.product.p_price / 100 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card shadow="never" class="card">
      <p>订单信息</p>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>退单单号:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div>{{ orderbackList.id }} </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>当前状态:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div> {{ orderbackList.process }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>订单编号:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div><span>{{ orderbackList.skuId }}</span><a href="点击查看" /></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>申请时间:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div>{{ orderbackList.addtime }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>用户账户:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div>{{ orderbackList.username }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>退单理由:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div>{{ orderbackList.reason }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="product" shadow="never">
      <el-row :gutter="20">
        <el-col :span="4" class="product-left">
          <div>联系人:</div>
        </el-col>
        <el-col :span="8" class="product-right">
          <div>{{ orderbackList.sendUser }}</div>
        </el-col>
        <el-col :span="4" class="product-top">
          <div>联系电话:</div>
        </el-col>
        <el-col :span="8" class="product-bottom">
          <div>{{ orderbackList.tel }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="product-left">
          <div>收货地址:</div>
        </el-col>
        <el-col :span="8" class="product-right">
          <div>{{ orderbackList.cityStr }}</div>
        </el-col>
        <el-col :span="4" class="product-top">
          <div>邮编:</div>
        </el-col>
        <el-col :span="8" class="product-bottom">
          <div>{{ orderbackList.cityCode }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="backorder-left">
          <div>详细地址:</div>
        </el-col>
        <el-col :span="20" class="backorder-right">
          <div>{{ orderbackList.cityBak }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="ss">
        <el-col :span="4" class="product-left">
          <div>订单金额:</div>
        </el-col>
        <el-col :span="8" class="product-right">
          <div>￥{{ orderbackList.order_price/100 }}</div>
        </el-col>
        <el-col :span="4" class="product-top">
          <div>确认退款金额:</div>
        </el-col>
        <el-col :span="8" class="product-bottom" style="height:40px">
          <div>
            ￥<el-input-number v-if="orderbackList.process == '0'" v-model="num" size="mini" style="height:15px margin-left:5px" :min="0" @change="handleChange" />
            <span v-if="orderbackList.process > '0'">{{ orderbackList.back_price }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- 开始处理退单  进度: 0 等待处理 ; 1 确认退货,等待收货; 2 : 确认收货,已退款 ; 9 : 拒绝退货 -->
      <el-row v-if="orderbackList.process == '0'" :gutter="20" class="ss">
        <el-col :span="4" class="product-left">
          <div>处理备注:</div>
        </el-col>
        <el-col :span="20" class="product-right" style="padding:5px">
          <div><el-input v-model="handlebak" type="primary" size="mini" placeholder="通过/拒绝的处理备注信息" /></div>
        </el-col>
      </el-row>
      <!-- 拒绝退货或者确认退货并且再订单还未关闭前，显示的内容 -->
      <el-row v-if="(orderbackList.process=='1'|| orderbackList.process=='9')&&orderbackList.statusend=='0'" :gutter="20" class="ss">
        <el-col v-if="(orderbackList.process == '1'|| orderbackList.process=='9')&&orderbackList.statusend == '0'" :span="4" class="product-left">
          <div>完成备注:</div>
        </el-col>
        <el-col :span="20" class="product-right" style="padding:5px">
          <div><el-input v-model="endbak" type="primary" size="mini" placeholder="收货后关闭订单的备注信息" /></div>
        </el-col>
      </el-row>

      <!-- 订单走完流程后，显示的内容 -->
      <div style="margin:20px">处理结果</div>
      <el-row :gutter="20">
        <el-col :span="4" class="product-left">
          <div>处理备注:</div>
        </el-col>
        <el-col :span="8" class="product-right">
          <div>{{ orderbackList.handlebak }}</div>
        </el-col>
        <el-col :span="4" class="product-top">
          <div>处理时间:</div>
        </el-col>
        <el-col :span="8" class="product-bottom">
          <div>{{ orderbackList.handletime }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" class="product-left">
          <div>完成备注:</div>
        </el-col>
        <el-col :span="8" class="product-right">
          <div>{{ orderbackList.endbak }}</div>
        </el-col>
        <el-col :span="4" class="product-top">
          <div>处理时间:</div>
        </el-col>
        <el-col :span="8" class="product-bottom">
          <div>{{ orderbackList.endtime }}</div>
        </el-col>
      </el-row>

      <div v-if="orderbackList.statusend=='0'" class="footer-button">
        <el-button v-if="orderbackList.process=='0'" size="small" @click="refuseOrder">拒绝退货</el-button>
        <el-button v-if="orderbackList.process=='0'" size="small" type="primary" @click="agreeOrder">确认退货</el-button>
        <el-button v-if="orderbackList.process=='1'" size="small" type="primary" @click="getOrder">收到退货</el-button>
        <el-button v-if="orderbackList.process=='9'" size="small" type="primary" @click="closeOrder">关闭订单</el-button>

      </div>

    </el-card>
  </div>
</template>

<script>
import { orderBackdetail, rejectBack, closeOrder, agreeBack, backDone } from '@/api/orderBack/index'
export default {
  data() {
    return {
      num: '',
      id: '',
      orderbackList: {}, // 整个退单商品信息列表
      goodsList: [], // 仅退单商品列表
      handlebak: '', // 同意或者拒绝退单的备注信息
      endbak: '', // 关闭订单的备注信息
      // back_price: this.orderbackList.back_price // 退款金额
      num: ''
    }
  },
  created() {
    console.log(this.$route.params.backId)
    this.getorderDetail()
    this.id = this.$route.params.backId
  },
  methods: {
    getorderDetail() {
      this.id = this.$route.params.backId
      orderBackdetail({
        id: this.id
      }).then(res => {
        console.log(res)
        this.orderbackList = res.data
        this.goodsList.push(this.orderbackList)
        console.log('商品列表', this.goodsList)
      })
    },
    handleChange(value) {
      console.log(value)
    },
    // 拒绝退货
    refuseOrder() {
      rejectBack({
        id: this.id,
        bak: this.handlebak
      }).then(res => {
        if (res.code === 'success') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 确认退货
    agreeOrder() {
      agreeBack({
        id: this.id,
        bak: this.handlebak,
        back_price: this.num
      }).then(res => {
        console.log('同意退货', res)
        if (res.code === 'success') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 收到退货
    getOrder() {
      backDone({
        id: this.id,
        bak: this.endbak
      }).then(res => {
        console.log('收到退货', res)
        if (res.code === 'success') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 完成订单
    closeOrder() {
      closeOrder({
        id: this.id,
        bak: this.endbak
      }).then(res => {
        console.log('完成订单', res)
        if (res.code === 'success') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .card{
    margin:0 30px;
  }
  img{
    width:100px;
    height: 100px;
  }
  .backorder-left{
    border:1px solid #eee;
    padding:10px;
    background:  #f5f7fa;
  }
  .backorder-right{
    border:1px solid #eee;
    padding:10px;
  }
  .product{
    // margin-top:10px;
    margin:0 30px;
    .product-left{
      border:1px solid #eee;
      padding:10px;
      background: #f5f7fa;
    }
    .product-right{
      border:1px solid #eee;
      padding:10px;
    }
    .product-top{
      border:1px solid #eee;
      padding:10px;
      background: #f5f7fa;
    }
    .product-bottom{
      border:1px solid #eee;
      padding:10px;
    }
  }
  .ss{
    margin-top:30px;
  }
  .footer-button{
    width:300px;
    margin:30px auto;
  }
</style>
